/*
 * @Author: luoqi
 * @Date: 2022-03-27 15:21:03
 * @LastEditors: luoqi
 * @LastEditTime: 2022-05-09 14:21:00
 * @Description: 
 */
import React, { useState,useEffect } from 'react';
import { Form, Input, Button, Select, Space, Card, Table, Popconfirm, message } from 'antd';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';

import Addvideo from './AddVideo';
import Modifyvideo from './ModifyVideo';
import DetailVideo from './DetailVideo';

import axios from '../../utils/axios'
import qs from 'qs'
import {connect} from 'react-redux'
import {addTab,changeActive} from '../../store/tabAction'


const Video = (props) => {
  const {departmentTree,partTree} = props.types;
  let [pag, setPag] = useState({ defaultCurrent: 1,  pageSize: 5 ,current:1,showTotal:total => `共 ${total} 条`,onChange:changePage})
  let [form]=Form.useForm()
  let [data, setData] = useState()
  //用于触发重新渲染页面
  let [num, setNum] = useState(0)
  //搜索或全部
  let [isAll,setIsAll]=useState(true)
  //页数更改时
  function changePage(page, pageSize) {
    console.log(page, pageSize);
    setPag({ ...pag, current: page, pageSize })
  }

  //页面加载完毕调接口，页数更改时调接口
  useEffect(() => {

    if(isAll){
      axios({
      url: '/video/searchByType',
      method: 'get',
      params: {
        page: pag.current,
        size: pag.pageSize,
      }
    }).then(res => {
      console.log(res);
      if (res.code === '200') {
        setIsAll(true)
        //给每一个加key
        setData(res.data.map(item => ({ ...item, key: item.id })))
        setPag({ ...pag, total: res.count })
        if (num == 1) {
          setNum(0)
        }

      }
    })
    }else{
      form.submit()
    }
    
  }, [pag.current, num,isAll])


  const onFinish = (values) => {
    console.log('Success:', values);
    axios({
      url: '/video/searchByType',
      method: 'get',
      params: {
        page: pag.current,
        size: pag.pageSize,
        title:values.title.trim()
      }
    }).then(res => {
      console.log(res);
      if (res.code === '200') {
        setIsAll(false)
        //给每一个加key
        setData(res.data.map(item => ({ ...item, key: item.id })))
        setPag({ ...pag, total: res.count })
        if (num == 1) {
          setNum(0)
        }
      }
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  }
  //删除分类
  function confirm(obj) {
    console.log(obj);
    axios({
      url: '/video/delete',
      method: 'post',
      data: qs.stringify({ ids: obj.id.toString() })
    }).then(res => {
      console.log(res);
      if (res.code == '200') {
        message.success('删除成功');
        setNum(1)
      }
    })
  }
  
  function cancel(e) {
    console.log(e);
    message.error('Click on No');
  }
  const columns = [
    {
      title: '视频标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '部位分类',
      dataIndex: 'partPid',
      key: 'partPid',
      render:text=>(text!=null&&partTree.find(item=>text==item.id).name)

    },
    {
      title: '科室分类',
      dataIndex: 'departmentPid',
      key: 'departmentPid',
      render:text=>(text!=null&&departmentTree.find(item=>text==item.id).name)
    },
    {
      title: '发布时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '发布管理员',
      dataIndex: 'adminName',
      key: 'adminName',
    },
    
    {
      title: '浏览量',
      dataIndex: 'viewNum',
      key: 'viewNum',
    },
    
    {
      title: '收藏量',
      dataIndex: 'collectionNum',
      key: 'collectionNum',
    },
    
    {
      title: '视频状态',
      dataIndex: 'status',
      key: 'status',
      render:text=>(text?'可用':'不可用')
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <DetailVideo url={record.url} title={record.title}/>
          <Modifyvideo data={record} setNum={setNum}/>
          <Popconfirm
              title="确定要删除该疾病吗?"
              onConfirm={()=>confirm(record)}
              onCancel={cancel}
              okText="确定"
              cancelText="取消"
            >
              <Button type="primary" ghost>删除</Button>
          </Popconfirm>
          
        </Space>
      ),
    },
  ];
  return (
    <div>
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Space>
          <Form.Item
            label="视频标题"
            name="title"
            rules={[
              {
                required: true,
                message: '请输入标题!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType='submit' icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Addvideo setNum={setNum}/>
          </Form.Item>
        </Space>
      </Form>
      <Table columns={columns} dataSource={data} pagination={pag} />
    </div>
  );
}

export default connect(
  state=>({tabs:state.tabs,types:state.types}),{addTab,changeActive}
)(Video);
